<template>


  <a-modal v-model:visible="visible" fullscreen :footer="false">
    <template #title>抢红包任务面板</template>

    <div class="text-editor-wrap">
      <div class="text-body">
        <div ref="messageRef" class="message-warp"></div>
      </div>

      <div class="flex justify-center ">
        <a-button class="m-6"  @click="scanf" type="primary">开始</a-button>
        <a-button  class="m-6" @click="stop" type="primary" status="danger">停止</a-button>
      </div>
    </div>

  </a-modal>

</template>

<script setup>
import {ref, reactive, computed, onMounted,nextTick} from 'vue'
import Typewriter from 'typewriter-effect/dist/core';
import {ipc} from "@/utils/ipcRenderer";
import Api from '@/api/anchor'
import {formatDate} from "@/utils/fun";
const visible = ref(false)
const record = ref()
let messageRef = ref()
let typed
let total = 0;
onMounted(() => {
  nextTick( () =>{

  })
})

function createTyped(){
  typed = new Typewriter(messageRef.value, {
    delay:0
  })
}

function writeMessage(msg){
  typed.typeString(msg).start();
  scrollToBottom()
}

function scrollToBottom(){
  if(messageRef.value){
    messageRef.value.scrollTop = messageRef.value.scrollHeight + 40;
  }
}

const open = (row) => {
  record.value = row
  visible.value = true
  createTyped()
  // typed.start()
  total = 0
}
const channel = "scanf.response"
async function scanf(){
  await Api.scanf({
    id:record.value.id,
    channel
  })
}
async function stop(){
  await Api.stop({
    id:record.value.id
  })
  let msg = `<p style="color: green">本次收益:${total}元</p>`
  writeMessage(msg)
}

ipc.on(channel, (event, params) =>{

  if(params.id != record.value?.id){
     return
  }
  if(params?.data?.money){
    total += params.data.money
  }
  let msg = "<p><span style='color: #27ae60;margin-right:10px'>" + formatDate() + '</span>'+params['message']+'</p>'
  writeMessage(msg)
})
defineExpose({ open })
</script>

<style scoped>
.text-editor-wrap {
  width: 80%;
  display: block;
  margin: auto;
  clear: both;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
.message-warp{
  height: 60vh;
  overflow-y: auto;
  padding: 10px;
}
.message-warp::-webkit-scrollbar {
  display: none;
}
.text-body {
  border-radius: 10px;
  height: 100%;
  padding: 15px 10px 20px 0;
  background-color: rgba(0, 0, 0, 0.85);
  color: #f0f0f0;
  text-shadow: #000 0px 1px 0px;
  font-family: "Consolas", "Courier New", "Courier",serif;
  font-size: 1.45em;
  line-height: 1.40em;
  font-weight: 500;
  text-align: left;
  overflow: hidden;
  -webkit-transition: all 0.5s ease-out;
  -moz-transition: all 0.5s ease-out;
  -ms-transition: all 0.5s ease-out;
  -o-transition: all 0.5s ease-out;
  transition: all 0.5s ease-out;
}
</style>